// const { resolve } = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require("extract-text-webpack-plugin");

const extractCss = new ExtractTextPlugin({
    allChunks:true,
    // filename: "css/[name].css"
    filename:  (getPath) => {
        // console.log(getPath('[name]'))
        return getPath('css/[name].css').replace('\\', '-')
    }
});
const extractVue = new ExtractTextPlugin({
    // allChunks:true,
    filename: "css/common-vue.css"
});


module.exports = {
    resolve: {
        alias: {
            'vue$': 'vue/dist/vue.esm.js', //运行时版本构建
            components: '../../components', // 组件别名,js里引用路径可直接 'components/xxx/yyy'
            mock: '../../mock',
            js: '../../js',
            jquery: 'jquery',
            plugins: '../../plugins'
        },
    },
    output: {
        filename: 'js/[name].js',
        chunkFilename: 'js/chunk.[name].js'
    },
    // devtool:'source-map',
    module: {
        noParse: [/vue.js/],
        rules: [
            {
                test: /\.js$/,
                loader: 'babel-loader?cacheDirectory=true',
                exclude: /node_modules/
            },
            {
                test: /\.(png|jpe?g|gif)(\?.*)?$/,
                loader: 'url-loader',
                query: {
                    limit: 5000, // 大于5kb用file-loader，否则存储为base64
                    name: 'images/[name].[hash:7].[ext]'
                }
            },
            {
                test: /\.(woff2?|eot|ttf|otf|svg)(\?.*)?$/,
                loader: 'url-loader',
                query: {
                    limit: 5000, // 大于5kb用file-loader，否则存储为base64
                    name: 'fonts/[name].[hash:7].[ext]'
                }
            },
            {
                test: /\.css$/,
                use: extractCss.extract({
                    fallback: 'style-loader',
                    use: 'css-loader',
                }),
                // loader: 'style-loader!css-loader'
            },
            {
                test: /\.json$/,
                loader: 'json-loader'
            },
            {
                test: /\.vue$/,
                loader: "vue-loader",
                // include: [resolve(__dirname, '/src')],
                options: {
                    loaders: {
                        css: extractVue.extract({
                            fallback: 'vue-style-loader', // <- 这是vue-loader的依赖，所以如果使用npm3，则不需要显式安装
                            use: 'css-loader',
                        }),
                        scss: extractVue.extract({
                            use: ['css-loader', 'sass-loader'],
                            fallback: 'vue-style-loader',
                        }),
                        // css: 'vue-style-loader!css-loader',
                        // scss: 'vue-style-loader!css-loader!sass-loader',
                        // scss: 'vue-style-loader!postcss-loader!sass-loader', // <style lang="scss">
                    },
                    // postcss: [
                    //     require('autoprefixer')({
                    //         browsers: ['last 20 versions', 'safari 5', 'opera 12.1', 'ios 7', 'android 4', '> 10%']
                    //     }),
                    // ],
                    // sourceMap:true
                }
            },
        ]
    },
    plugins: [
        //分离css
        extractVue,
        extractCss,

        //分离公共js
        new webpack.optimize.CommonsChunkPlugin({
            name:'common',
            filename:'js/common.js',
            // async:true,
            // minChunks:Infinity,
            minChunks(module, count) {
                // console.log(module.rawRequest)
                // console.log(module.context)
                if(/\.css$/.test(module.resource)){
                    // console.log(context)
                    return true;
                } else{
                    return count >= 2
                }
            },
            minSize:50000
        }),

        // new webpack.optimize.CommonsChunkPlugin({
        //     async:true,
        //     minChunks(module, count) {
        //         let context = module.context
        //         // console.log(module.resource)
        //         console.log(module.context)
        //         if(context.indexOf('antd/dist') >= 0){
        //             // console.log(module.rawRequest)
        //             return true;
        //         }
        //     }
        // }),

    ]
};